<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html class="ui-mobile">
    <head>
        <title>neighborhoods</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
        <link rel="stylesheet" href="css/font-awesome.min.css">

        <!-- jQueryMobileCSS - original without styling -->
        <link rel="stylesheet" href="css/jquerymobile.css">

        <!-- nativeDroid core CSS -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.css">

        <!-- nativeDroid: Light/Dark -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id="jQMnDTheme">

        <!-- nativeDroid: Color Schemes -->
        <link rel="stylesheet" href="css/jquerymobile.nativedroid.color.red.css" id="jQMnDColor">
        <!-- jQuery / jQueryMobile Scripts -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

        <style type="text/css"></style>
    </head>
    <body class="ui-mobile-viewport ui-overlay-b">

        <!-- main page -->
        <section data-role="page" id="index"  data-theme="b" data-url="index.html" tabindex="0" class="ui-page ui-body-b ui-page-header-fixed ui-page-active" style="padding-top: 52px; min-height: 483px;"> 
            <!-- Header starts here! -->
            <div data-role="header" id="source-header" data-id="main-header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-header ui-bar-b ui-header-fixed slidedown" role="banner">
                <h1 class="ui-title" role="heading" aria-level="1">neighborhoods</h1>
                <a href="#index" data-ajax="false" class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b"><span class="ui-btn-inner"><span class="ui-btn-text"><i class="icon-home"></i></span></span></a>
            </div>

            <!-- User info -->
            <div data-role="content">
                <img src="images/img_prof.jpg" class="user-picture" alt="Profile Image"/>
                <h1 class="user-name" style="font-size: 20px">Yonatan Karp</h1><br>
            </div>
            <br>
            <!-- New Posts -->
            <ul data-role="listview" data-inset="false" data-icon="false" data-divider-theme="b" class="ui-listview">
                <li data-role="list-divider" class="ui-li ui-li-divider ui-bar-b ui-li-has-count ui-first-child">New Posts<span class="ui-li-count ui-btn-up-c ui-btn-corner-all"></span></li>
                <li class="ui-btn-active"><a href="http://www.google.com">"I hate Orphand-Land!!!!!!"</a><br><br><br><br></li>
                <li><a href="http://www.google.com">"I hate You!!!!!!"</a><br><br><br><br></li>
                <li><br><br><br><br></li>
                <li><br><br><br><br></li>
            </ul>
            <br><br><br>

            <!-- Footer starts here! -->
            <div data-role="footer" data-id="main-footer" id="source-footer" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-footer ui-bar-b ui-footer-fixed slideup" role="contentinfo">
                <div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
                    <ul class="ui-grid-b">
                        <li class="ui-block-a">
                            <a href="#add-post" data-icon="long-arrow-up" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="b" data-inline="true" class="ui-btn ui-btn-active ui-btn-up-b ui-btn-inline ui-btn-icon-top">
                            </a>
                        </li>
                        <li class="ui-block-b">
                            <a href="#" data-icon="envelope" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="b" data-inline="true" class="ui-btn ui-btn-up-b ui-btn-inline ui-btn-icon-top">
                            </a></li>
                        <li class="ui-block-c">
                            <a href="#settings" data-icon="cogs" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-iconpos="top" data-theme="b" data-inline="true" class="ui-btn ui-btn-inline ui-btn-icon-top ui-btn-hover-b">
                            </a></li>
                    </ul>
                </div>
            </div>
        </section>


        <!-- Add Post Page -->
        <section data-role="page" id="add-post" class="ui-page ui-body-b"> 
            <!-- Header starts here! -->
            <div data-role="header" id="source-header" data-id="main-header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-header ui-bar-b ui-header-fixed slidedown" role="banner"></div>

            <!-- Page starts here -->
            <div data-role="content">
                <form class="ui-input-text">
                    <ul class="ui-listview">                        
                        <li data-role="list-divider" class="ui-li ui-li-divider ui-bar-b ui-first-child">Add a Post</li>                        
                        <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-b"><input type="text" name="title" placeholder="Title"></li>
                        <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-b"><input type="text" name="artist" placeholder="Artist"></li>
                        <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-b"><input type="text" name="album-song" placeholder="Album \ Song"></li>
                        <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-b"><textarea class="ui-input-text" cols="70" rows="68" name="content" placeholder="Write here..."></textarea></li>
                        <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-b">
                            <label for="select-choice-1b" class="select ui-select">Select genre</label>
                            <div class="ui-select">
                                <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-d" data-iconpos="right" data-theme="b" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-right ui-focus ui-btn-hover-b">

                                    <select name="select-choice-1" id="select-choice-1b" data-native-menu="true">
                                        <option value="javascript">Rock</option>
                                        <option value="css">Pop</option>
                                        <option value="html">Folk</option>
                                        <option value="csharp">Electronic</option>
                                        <option value="java">Hip-Hop</option>
                                        <option value="java">Rap</option>
                                        <option value="java">R&amp;B</option>
                                        <option value="java">Soul</option>
                                        <option value="java">Jazz</option>
                                        <option value="java">Blues</option>
                                        <option value="java">Country</option>
                                        <option value="java">Alternative</option>
                                        <option value="java">Metal</option>

                                    </select></div></div></li>
                    </ul>
                    <input type="submit" value="share!">
                </form>

            </div>

            <!-- Footer starts here! -->
            <div data-role="footer" data-id="main-footer" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-footer ui-bar-b ui-footer-fixed slideup" role="contentinfo"></div>
        </section>


        <!-- Settings Page -->
        <section data-role="page" id="settings" class="ui-page ui-body-b"> 
            <!-- Header starts here! -->
            <div data-role="header" id="source-header" data-id="main-header" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-header ui-bar-b ui-header-fixed slidedown" role="banner"></div>

            <!-- Page starts here -->
            <div data-role="content">
                <form class="ui-input-text">
                    <ul class="ui-listview">                        
                        <li data-role="list-divider" class="ui-li ui-li-divider ui-bar-b ui-first-child">Settings</li>                        
                        <li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-b"><input type="text" name="title" placeholder="Enter a New User Name"></li>
                        <li>
                            <input type="number" data-type="range" name="dist" id="slider" value="0" min="0" max="100" data-highlight="true">
                        </li>
                    </ul>
                    <br><br><br><br><br><br><br><br><br><br><br><br>
                    <input type="submit" value="save changes">
                </form>

            </div>

            <!-- Footer starts here! -->
            <div data-role="footer" data-id="main-footer" data-position="fixed" data-tap-toggle="false" data-theme="b" class="ui-footer ui-bar-b ui-footer-fixed slideup" role="contentinfo"></div>
        </section>            
        <!-- a Call to the Java Script file -->
        <script src="script.js"></script>
    </body>
</html>
